<template>
  <view>
    <view class="tab-fixed">
      <u-tabs
        :list="tabList"
        :current="currentIndex"
        itemStyle="height: 34px;width: 25%;box-sizing: border-box;"
        @change="handleTabChange"
      ></u-tabs>
    </view>
    <view class="identity-list">
      <u-list @scrolltolower="scrolltolower">
        <view
          v-for="(item, index) in listData"
          :key="index"
          class="identity-cell"
          @click="navDetail(item)"
        >
          <u-cell
            :border="false"
            :title="item.mobile"
            :value="auditName[item.audit]"
            :isLink="true"
          >
            <view slot="label" class="identity-text">
              申请身份：
              <text class="identity-text">{{ item.roleName }}</text>
            </view>
            <u-avatar
              slot="icon"
              size="35"
              :src="item.avatar"
              customStyle="margin: -3px 5px -3px 0"
            ></u-avatar>
          </u-cell>
        </view>
        <view class="more">
          <u-loadmore :status="loadingStatus" />
        </view>
      </u-list>
    </view>
  </view>
</template>
<script>
const auditName = {
  0: '待审核',
  1: '同意',
  2: '拒绝',
}
export default {
  data() {
    return {
      auditName,
      listData: [],
      pageNo: 1,
      pageSize: 10,
      loadingStatus: 'loading',
      tabIndex: -1,
      tabList: [
        {
          name: '全部',
          id: -1,
        },
        {
          name: '待审核',
          id: 0,
        },
        {
          name: '同意',
          id: 1,
        },
        {
          name: '拒绝',
          id: 2,
        },
      ],
      currentIndex: 0,
    }
  },
  onLoad(options) {
    this.tabIndex = Number(options.status)
    if (options.status == -1) {
      this.currentIndex = 0
    } else if (options.status == 0) {
      this.currentIndex = 1
    } else if (options.status == 1) {
      this.currentIndex = 2
    } else if (options.status == 2) {
      this.currentIndex = 3
    }
    this.getList()
  },
  onShow() {
    this.pageNo = 1
    this.listData = []
    this.loadingStatus = 'loading'
    this.getList()
  },
  methods: {
    scrolltolower() {
      ++this.pageNo
      if (this.loadingStatus == 'nomore') return
      this.getList()
    },
    handleTabChange(param) {
      this.pageNo = 1
      this.tabIndex = param.id
      this.listData = []
      this.loadingStatus = 'loading'
      this.getList()
    },
    navDetail(item) {
      let url = `/pages/form/manager`
      if (item.roleId == 4) {
        url = `/pages/form/company`
      } else if (item.roleId == 3) {
        url = `/pages/form/workerForm`
      }
      url += `?examineId=${item.id}`
      this.$routeUtils.navigateTo({ url })
    },
    getList(refresh = false) {
      if (this.requesting) return
      this.requesting = true
      this.loadingStatus = 'loading'
      const param = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }
      if (this.tabIndex != -1) param.audit = this.tabIndex
      this.$request('/roleApply/roleApplyPage', param)
        .then((res) => {
          let result = res.result.records
          if (this.pageNo === 1) this.listData = []
          this.listData = [...this.listData, ...result]
          const total = res.result.total
          this.loadingStatus = this.listData.length >= total ? 'nomore' : 'loadmore'
        })
        .finally(() => (this.requesting = false))
    },
  },
}
</script>

<style lang="scss" scoped>
.identity-list {
  padding: 0 20rpx;
  margin-top: 60rpx;
  .identity-cell {
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 20rpx;
    .identity-text {
      font-size: 28rpx;
      color: #999;
      margin-top: 10rpx;
    }
  }
}
.more {
  margin-top: 20rpx;
}
.tab-fixed {
  position: fixed;
  background-color: #ffffff;
  z-index: 10;
  width: 100%;
  top: 88rpx;
  /*  #ifdef MP-WEIXIN*/
  top: 0;
  /*  #endif  */
}
</style>
